<template>
	<view class="login">
		<u--form labelPosition="left" :model="form" ref="form" :rules="rules" errorType="toast">
			<u-form-item label="头像" prop="avatar" borderBottom ref="item1">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="form.avatar" style="
					position: absolute;
					top: 0px;
					left: 0;
					height: 50px;
					width: 50px;" mode="widthFix"></image>
				</button>
			</u-form-item>
			<u-form-item label="昵称" prop="name" borderBottom ref="item1">
				<u-input border="none" type="nickname" class="weui-input" placeholder="请输入昵称" v-model="form.name"
					@blur="getNikeName">
				</u-input>
			</u-form-item>
			<u-form-item label="手机号" prop="phone" borderBottom ref="item1">
				<u-input disabled border="none" placeholder="请点击获取手机号" v-model="form.phone">
					<template slot="suffix">
						<!-- <u--text text="获取手机号" @click="getPhoneNumber"></u--text> -->
						<u-button :customStyle="{width:'200rpx',height:'60rpx'}" type="primary"
							openType="getPhoneNumber" text="获取手机号" shape="square" @getphonenumber="getphonenumber">
						</u-button>
					</template>
				</u-input>
			</u-form-item>
		</u--form>
		<view class="flex-center">
			<view class="mt100">
				<u-button type="primary" text="登 录" :throttleTime="1000" @click="loginFun"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import custEmpty from "@/components/cust-empty/index.vue";
	import {
		throttle
	} from '@/utils/utils.js'
	import {
		getCustomerWeixinPhoneAPI,
		registerAPI,
		getTokenAPI,
		refreshTokenFun
	} from "@/api/api/user"
	export default {
		components: {
			custEmpty
		},

		data() {
			return {
				form: {
					avatar: "/static/images/index/default-avator.png",
					name: "",
					phone: ""
				},
				rules: {
					'avatar': {
						type: 'string',
						required: true,
						message: '请选择头像',
						trigger: ['blur']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请输入用户昵称',
						trigger: ['change']
					},
					'phone': {
						type: 'string',
						required: true,
						message: '请获取用户手机号码',
						trigger: ['blur']
					},
				},
			}
		},
		methods: {
			getNikeName(value) {
				this.form.name = value;
			},
			onChooseAvatar(e) {
				this.form.avatar = e.detail.avatarUrl;
			},
			//获取用户电话号码
			getphonenumber(result) {
				let that = this;
				that.showDia = false;
				uni.login({
					success: function(loginRes) {
						let encryptedData = result.detail.encryptedData;
						if (!encryptedData) return;
						let iv = result.detail.iv;

						getCustomerWeixinPhoneAPI({
							encryptedData: encryptedData,
							iv: iv,
							code: loginRes.code,
						}).then(([err, data]) => {
							if (err) return;
							that.form.phone = data.purePhoneNumber;
						})
					}
				});

			},
			$switchTab(url) {
				uni.switchTab({
					url: url
				});
			},
			loginFun: throttle(function() {
				let that = this;
				this.$refs.form.validate().then(res => {
					uni.login({
						success: function(res) {
							let params = {
								code: res.code,
								name: that.form.name,
								phone: that.form.phone,
								avatar: that.form.avatar
							}
							registerAPI(params).then(([err, data]) => {
								if (err) return;
								getTokenAPI({
									oauthId: data.oauthId
								}).then(([err2, data2]) => {
									if (err2) return;
									let loginUser = {
										access_token: data2.access_token,
										avatar: data2.avatar,
										expires_in: data2.expires_in,
										nick_name: data2.nick_name,
										phone: data2.phone,
										refresh_token: data2.refresh_token,
										user_id: data2.user_id
									}
									that.$store.commit("setLoginUser",
										loginUser);

									//that.$u.vuex('datetime', new Date().getTime());
									//clearInterval(that.refreshTime);
									that.$switchTab("/pages/views/home/index");
									refreshTokenFun();
								})

							})
						}
					})
				}).catch(errors => {
					this.$showToast('校验失败')
				})
			})
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		padding: 30rpx;

		::v-deep button {
			width: 400rpx;
			border-radius: 10px;
		}

		.avatar-wrapper {
			float: right;
			width: 50px;
			height: 50px;
			border-radius: 50px;
		}

		::v-deep .u-input__content__subfix-icon .u-button__text {
			font-size: 24rpx !important;
		}

		::v-deep .u-input__content__field-wrapper__field {
			text-align: right !important;
		}

		::v-deep .u-form-item:first-child {
			.u-form-item__body__right__content {
				justify-content: flex-end !important;

				.u-form-item__body__right__content__slot {
					display: inline-block !important;
				}
			}
		}
	}
</style>
